<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/login.png" alt="">
      </template>
      <template #right>
        <van-icon name="search" color="#fff" size="0.48rem" />
      </template>
    </van-nav-bar>
    <!-- 频道导航 -->
    <div class="tabs_content">
      <van-tabs
      v-model="active"
      color="#007bff"
      sticky
      animated
      offset-top="1.22667rem">
        <van-tab v-for="obj in userChannelList" :key="obj.id" :title="obj.name">
          <article-list :cid="obj.id"></article-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 编辑频道图标 -->
    <van-icon name="plus" size="0.37333334rem" @click="show = true" class="moreChannels"/>
    <!-- 弹出层 -->
    <van-popup v-model="show" class="edit_wrap">
      <!-- .sync语法糖(双向数据绑定)
      运行时，代码会被自动转换为：
      :userChannelList = "userChannelList" 父 -> 子
      @update:userChannelList = "val => userChannelList = val"
      -->
      <channel-edit
      v-model="show"
      :userChannelList.sync="userChannelList"
      @changeChannelEV="changeChannelFn"></channel-edit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelListAPI } from '@/api'
import ArticleList from './ArticleList.vue'
import channelEdit from './ChannelEdit.vue'
export default {
  name: 'HM-Home',
  components: {
    ArticleList,
    channelEdit
  },
  data () {
    return {
      active: 0,
      userChannelList: [], // 用户已选频道列表
      show: false
    }
  },
  mounted () {
    this.getUserChannelList()
  },
  methods: {
    // 获取用户已选频道列表
    async getUserChannelList () {
      const { data: { data: { channels } } } = await getUserChannelListAPI()
      console.log(channels)
      this.userChannelList = channels
    },
    // 子传父 --> 函数
    changeChannelFn (index) {
      this.active = index // 修改控制首页频道列表默认选中的下标
      this.show = false // 关闭弹框
    }
  }
}
</script>

<style scoped lang="less">
.logo {
    width: 100px;
    height: 30px;
}
.tabs_content{
  padding-top: 44px;
}

// 设置 tabs 容器的样式
::v-deep .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 设置弹出层的宽高
.edit_wrap{
  width: 100%;
  height: 100%;
}
</style>
